<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // Object.defineProperty()
        // 语法：Object.defineProperty(obj, prop/key, descriptor)
        // 作用：给对象定义一个属性或者修改原来的一个属性，并返回这个对象
       
        let color = 'orange'
        
        const obj = {
            id:1,
            name:'小米',
            price:1999
        }

        Object.defineProperty(obj, 'color', {
            enumerable:true, // 控制属性是否可以枚举，默认为false
            configurable:true, // 主要控制对象的这个属性是否可以被删除，默认为false

            // 存取描述符 一般叫这两个叫做 getter函数 和 setter函数 

            // 当读取obj.color的时候，getter函数就会被调用，返回值就是color属性的值
            get:function reactiveGetter(){
                console.log('getter函数被调用了')
                return color
            },
            // obj.color = 'skyblue'
            // 当属性值被修改的时候，会调用这个函数，它接收一个参数
            set:function reactiveSetter(newVal){
                console.log('setter函数被调用了')
                color = newVal
            }
        })

        // 注意：数据描述符 value 和 writable 不能和 get 或 set函数一起使用
        console.log(obj)
        // console.log(obj.color)

        // 通过get和set函数，让两个独立的obj 和 color变量 产生了一种微妙的联系
    </script>
</body>
</html>